<template>
  <section class="container">
    <el-menu
      :default-active="active"
      router
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item
        v-for="item in menu"
        :key="item.index"
        :index="item.index"
        >{{ item.name }}</el-menu-item
      >
    </el-menu>

    <router-view class="body"></router-view>
    
  </section>
</template>

<script>
import {mapGetters} from 'vuex';
export default {
  name: "setting",
  data() {
    return {
      menu: [
        { name: "网络配置", index: "ip" },
        { name: "用户配置", index: "user" },
        { name: "网关配置", index: "gateway" },
        { name: "实时数据", index: "rtd" },
        { name: "运维信息", index: "prdtInfo" },
      ],
      active: "gateway",
    };
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  mounted(){
    this.active = this.$route.path.replace('/', '');
    if(this.userInfo.is_admin == 0) {
      this.menu = [
        { name: "网络配置", index: "ip" },
        { name: "网关配置", index: "gateway" },
        { name: "实时数据", index: "rtd" },
        { name: "运维信息", index: "prdtInfo" },
      ]
    }
  },

};
</script>
<style lang="scss" scoped>
.container {
  display: flex;
  overflow: hidden;
  .el-menu {
    height: 100vh;
    width: 200px;
  }
  .body{
    width: 100%;
  }

}
</style>